<template>
  <el-form
    :inline='true'
    :model='form'
    :rules='rules'
    ref='form'
    size='mini'
    style='margin-bottom: -18px;'>

    <!-- <el-form-item label='状态' prop='type'>
      <el-select
        v-model='form.type'
        placeholder='状态选择'
        style='width: 100px;'>
        <el-option label='状态 1' value='1'/>
        <el-option label='状态 2' value='2'/>
        <el-option label='状态 3' value='3'/>
        <el-option label='状态 4' value='4'/>
        <el-option label='状态 5' value='5'/>
      </el-select>
    </el-form-item> -->
    <el-form-item label='编号' prop='key'>
      <el-input
        v-model='form.size'
        placeholder='编号'
        style='width: 120px;'/>
    </el-form-item>
    <el-form-item label='设备名称' prop='name'>
        <el-select
          v-model='form.name'
          placeholder='设备名称'
          style='width: 100px;'>
          <el-option label='状态 1' value='1'/>
          <el-option label='状态 2' value='2'/>
          <el-option label='状态 3' value='3'/>
          <el-option label='状态 4' value='4'/>
          <el-option label='状态 5' value='5'/>
        </el-select>
    </el-form-item>

    <el-form-item label='设备型号' prop='size'>
      <el-input
        v-model='form.size'
        placeholder='设备型号'
        style='width: 120px;'/>
    </el-form-item>

    <el-form-item label='设备状态' prop='note'>
      <el-select
          v-model='form.note'
          placeholder='设备状态'
          style='width: 100px;'>
          <el-option label='正常' value='1'/>
          <el-option label='维修中' value='2'/>
          <el-option label='报废' value='3'/>
          <el-option label='库存备用' value='4'/>
        </el-select>
    </el-form-item>
    <el-form-item label='厂家' prop='vender'>
      <el-select
          v-model='form.vender'
          placeholder='厂家'
          style='width: 100px;'>
          <el-option label='厂家1' value='1'/>
          <el-option label='厂家2' value='2'/>
          <el-option label='厂家3' value='3'/>
          <el-option label='厂家4' value='4'/>
        </el-select>
    </el-form-item>
    <el-form-item label='供应商' prop='supplier'>
      <el-select
          v-model='form.supplier'
          placeholder='供应商'
          style='width: 100px;'>
          <el-option label='供应商1' value='1'/>
          <el-option label='供应商2' value='2'/>
          <el-option label='供应商3' value='3'/>
          <el-option label='供应商4' value='4'/>
        </el-select>
    </el-form-item>
    <el-form-item>
      <el-button
        type='primary'
        @click='handleFormSubmit'>
        <d2-icon name='search'/>
        查询
      </el-button>
    </el-form-item>

    <el-form-item>
      <el-button
        @click='handleFormReset'>
        <d2-icon name='refresh'/>
        重置
      </el-button>
    </el-form-item>

  </el-form>
</template>

<script>
export default {
  data () {
    return {
      form: {
        type: '1',
        user: '',
        key: '',
        note: ''
      },
      rules: {
        type: [ { required: true, message: '请选择一个状态', trigger: 'change' } ],
        user: [ { required: true, message: '请输入用户', trigger: 'change' } ]
      }
    }
  },
  methods: {
    handleFormSubmit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$emit('submit', this.form)
        } else {
          this.$notify.error({
            title: '错误',
            message: '表单校验失败'
          })
          return false
        }
      })
    },
    handleFormReset () {
      this.$refs.form.resetFields()
    }
  }
}
</script>
